import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/ui/scroll_refresh_config.dart';
import 'package:life_service/utils/styles.dart';
import 'package:life_service/utils/tools.dart';

import '../controller.dart';

class MineWalletCardPage extends GetView<MineWalletCardController> {
  const MineWalletCardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(Get.mediaQuery.padding.top + 44),
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Container(
            padding: Get.mediaQuery.padding,
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: HexColor(HexColor.colorF2f2),
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                  onPressed: Get.back,
                  child: Text.rich(
                    TextSpan(
                      children: [
                        const WidgetSpan(
                          child: Icon(
                            CupertinoIcons.chevron_back,
                            size: 18,
                            color: Colors.black,
                          ),
                        ),
                        TextSpan(
                          text: ' 我的钱包',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            color: HexColor.color3333,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                TextButton(
                  onPressed: () {},
                  child: Text(
                    '添加',
                    style: StylesUtils.customTextStyle(
                      color: HexColor.colorFf62,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: Obx(
        () => scrollRefreshConfig(context),
      ),
    );
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: controller.refreshController,
      onRefresh: controller.onRefresh,
      onLoading: controller.onLoading,
      child: listViewBuilder(context),
    );
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, index) {
        return GestureDetector(
          onTap: () {},
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            child: Container(
              padding: const EdgeInsets.all(15),
              constraints: const BoxConstraints.expand(width: 334, height: 150),
              decoration: BoxDecoration(
                  color: HexColor(HexColor.colorFf62),
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset.zero,
                      blurRadius: 10,
                      spreadRadius: 0,
                      color: HexColor.rgba(204, 204, 204, 0.349019607843137),
                      blurStyle: BlurStyle.outer,
                    ),
                  ]),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  ToolsUtils.image('bank/${controller.pageList[index].icon}',
                      width: 36, height: 36),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Column(
                        children: [
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              controller.pageList[index].name,
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize20,
                                  color: HexColor.colorFfff),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 5, bottom: 20),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '储蓄卡',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.colorFfff),
                            ),
                          ),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 8,
                              children: [
                                Text(
                                  '****',
                                  style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfff,
                                      fontSize: StylesUtils.fontSize20),
                                ),
                                Text(
                                  '****',
                                  style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfff,
                                      fontSize: StylesUtils.fontSize20),
                                ),
                                Text(
                                  '****',
                                  style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfff,
                                      fontSize: StylesUtils.fontSize20),
                                ),
                                Text(
                                  '0890',
                                  style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFfff,
                                      fontSize: StylesUtils.fontSize20),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
      itemCount: controller.pageList.length,
    );
  }
}
